<template>
  <div class="rent-table">
    <div class="options-header">
      <el-input v-model="search" placeholder="请输入内容" prefix-icon="el-icon-search" class="search-input"/>
      <el-select v-model="region" placeholder="请选择活动区域" class="select">
        <el-option label="未审核" value="未审核"/>
        <el-option label="已通过" value="已通过"/>
        <el-option label="未通过" value="未通过"/>
      </el-select>
      <el-button :loading="false" type="primary" class="search-btn">{{ searchText }}</el-button>
    </div>
    <el-table :data="tableData" :highlight-current-row="true" border style="width: 100%" class="data-table">
      <el-table-column prop="name" label="设备类型" width="220" class="type"/>
      <el-table-column prop="province" label="用户ID" width="220"/>
      <el-table-column prop="city" label="联系人" width="220"/>
      <el-table-column prop="address" label="手机号" width="300"/>
      <el-table-column prop="zip" label="发布人" width="220" />
      <el-table-column prop="status" label="状态" width="200" >
        <template slot-scope="scope">
          <el-tag type="info">未审核</el-tag>
          <el-tag type="success">已通过</el-tag>
          <el-tag type="danger">未通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="319">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClick(scope.$index)">查看</el-button>
          <el-button type="primary" @click="handleDialogClick(scope)">未审核</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination> -->
    <el-dialog :visible.sync="dialogFormVisible" title="审核">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="选项">
          <el-radio-group v-model="pass">
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核未通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <router-view/>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        status: '未审核',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        status: '未审核',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        status: '未审核',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        status: '未审核',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      region: '',
      search: '',
      searchText: '搜索',
      dialogFormVisible: false,
      form: {
        name: '',
        region: ''
      },
      formLabelWidth: '120px',
      pass: 3,
      currentPage4: 1,
      total: 10,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      }
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
      this.$router.push({
        path: '/message/maintain/detail'
      })
    },
    handleDialogClick(info) {
      console.log(info)
      this.dialogFormVisible = true
    },
    getList() {

    }
  }
}
</script>
<style lang="scss" scoped>
.rent-table {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .options-header {
    display: flex;
    margin-bottom: 20px;
    .search-input {
      margin-right: 20px;
      flex:1;
    }
    .select {
      margin-right: 20px;
      flex:1;
    }
    .search-btn {
     flex:1;
    }
  }
  .data-table{
    margin-bottom: 20px;
  }
}
</style>
